import React, { useState } from "react";
import { Search } from "react-vant";

export interface SearchItemChange {
    (text: string): void
}
interface SearchProps {
    getSearchVal: SearchItemChange
}

const SearchInput: React.FC<SearchProps> = (props) => {
    const { getSearchVal } = props
    const [value, setValue] = useState('');

    const searchKeywordChange = (val: any) => {
        if (val.trim() === "") {
            getSearchVal('')
        }
        setValue(val)
    }

    return <div style={({ '--rv-search-padding': "10px 16px 4px 16px" }) as React.CSSProperties}>
        <Search shape="round" value={value} onSearch={getSearchVal} onClear={() => getSearchVal('')} onChange={searchKeywordChange} clearable placeholder="请输入搜索关键词" />
    </div>
};

export default SearchInput;
